M

MLOG

O'zbek

useMemo, useCallback va React.memo yordamida React ilovasi samaradorligini optimallashtirish bo'yicha to'liq qo'llanma. Keraksiz qayta renderlashlarning oldini olish va foydalanuvchi tajribasini yaxshilashni o'rganing.

React samaradorligini optimallashtirish: useMemo, useCallback va React.memo'ni mukammal o'zlashtirish

Foydalanuvchi interfeyslarini yaratish uchun mashhur JavaScript kutubxonasi bo'lgan React o'zining komponentlarga asoslangan arxitekturasi va deklarativ uslubi bilan tanilgan. Biroq, ilovalar murakkablashgan sari, samaradorlik muammoga aylanishi mumkin. Komponentlarning keraksiz qayta renderlanishi sust ishlashga va yomon foydalanuvchi tajribasiga olib kelishi mumkin. Yaxshiyamki, React samaradorlikni optimallashtirish uchun bir nechta vositalarni taqdim etadi, jumladan useMemo, useCallback va React.memo. Ushbu qo'llanma yuqori samarali React ilovalarini yaratishingizga yordam berish uchun amaliy misollar va foydali maslahatlar bilan ushbu usullarni chuqur o'rganadi.

React'da qayta renderlashlarni tushunish

Optimizatsiya usullariga sho'ng'ishdan oldin, React'da nima uchun qayta renderlashlar sodir bo'lishini tushunish juda muhim. Komponentning holati (state) yoki proplari o'zgarganda, React ushbu komponentning va, ehtimol, uning bola komponentlarining qayta renderlanishini ishga tushiradi. React haqiqiy DOM'ni samarali yangilash uchun virtual DOM'dan foydalanadi, ammo haddan tashqari ko'p qayta renderlashlar, ayniqsa murakkab ilovalarda, samaradorlikka ta'sir qilishi mumkin. Mahsulot narxlari tez-tez yangilanib turadigan global elektron tijorat platformasini tasavvur qiling. Optimizatsiyasiz, hatto kichik narx o'zgarishi ham butun mahsulotlar ro'yxati bo'ylab qayta renderlashlarni keltirib chiqarishi va foydalanuvchining ko'rish tajribasiga ta'sir qilishi mumkin.

Nima uchun komponentlar qayta renderlanadi

Samaradorlikni optimallashtirishning maqsadi keraksiz qayta renderlashlarning oldini olish, komponentlar faqat ularning ma'lumotlari haqiqatda o'zgarganda yangilanishini ta'minlashdir. Fond bozori tahlili uchun real vaqtda ma'lumotlarni vizualizatsiya qilish stsenariysini ko'rib chiqing. Agar diagramma komponentlari har bir kichik ma'lumot yangilanishida keraksiz qayta renderlansa, ilova javob bermaydigan bo'lib qoladi. Qayta renderlashlarni optimallashtirish silliq va sezgir foydalanuvchi tajribasini ta'minlaydi.

useMemo'ga kirish: Qimmat hisob-kitoblarni memoizatsiya qilish

useMemo - bu hisob-kitob natijasini memoizatsiya qiladigan React hook'i. Memoizatsiya - bu qimmat funksiya chaqiruvlari natijalarini saqlaydigan va bir xil kirish ma'lumotlari qayta kelganda ushbu natijalardan qayta foydalanadigan optimallashtirish usuli. Bu funksiyani keraksiz qayta bajarish zaruratini oldini oladi.

useMemo'ni qachon ishlatish kerak

useMemo qanday ishlaydi

useMemo ikkita argument qabul qiladi:

  1. Hisob-kitobni bajaradigan funksiya.
  2. Bog'liqliklar massivi.

Funksiya faqat massivdagi bog'liqliklardan biri o'zgargandagina bajariladi. Aks holda, useMemo avval memoizatsiya qilingan qiymatni qaytaradi.

Misol: Fibonachchi ketma-ketligini hisoblash

Fibonachchi ketma-ketligi hisoblash jihatidan intensiv hisob-kitobning klassik namunasidir. Keling, useMemo yordamida n-chi Fibonachchi sonini hisoblaydigan komponent yaratamiz.


import React, { useState, useMemo } from 'react';

function Fibonacci({ n }) {
  const fibonacciNumber = useMemo(() => {
    console.log('Fibonachchini hisoblash...'); // Hisoblash qachon ishga tushishini ko'rsatadi
    function calculateFibonacci(num) {
      if (num <= 1) {
        return num;
      }
      return calculateFibonacci(num - 1) + calculateFibonacci(num - 2);
    }
    return calculateFibonacci(n);
  }, [n]);

  return 
Fibonacci({n}) = {fibonacciNumber}
;
}

function App() {
  const [number, setNumber] = useState(5);

  return (
    

       setNumber(parseInt(e.target.value))}
      />
      
    

  );
}

export default App;

Ushbu misolda calculateFibonacci funksiyasi faqat n prop o'zgarganda bajariladi. useMemo bo'lmasa, funksiya n bir xil bo'lib qolsa ham, Fibonacci komponentining har bir qayta renderlanishida bajarilar edi. Bu hisob-kitob global moliyaviy panelda sodir bo'layotganini tasavvur qiling - bozorning har bir o'zgarishi to'liq qayta hisoblashga sabab bo'lib, sezilarli kechikishga olib keladi. useMemo buning oldini oladi.

useCallback'ga kirish: Funksiyalarni memoizatsiya qilish

useCallback - bu funksiyalarni memoizatsiya qiladigan yana bir React hook'i. U har bir renderda yangi funksiya nusxasini yaratilishining oldini oladi, bu ayniqsa callback'larni bola komponentlarga prop sifatida uzatishda foydali bo'lishi mumkin.

useCallback'ni qachon ishlatish kerak

useCallback qanday ishlaydi

useCallback ikkita argument qabul qiladi:

  1. Memoizatsiya qilinadigan funksiya.
  2. Bog'liqliklar massivi.

Funksiya faqat massivdagi bog'liqliklardan biri o'zgargandagina qayta yaratiladi. Aks holda, useCallback bir xil funksiya nusxasini qaytaradi.

Misol: Tugmani bosishni qayta ishlash

Keling, callback funksiyasini ishga tushiradigan tugmaga ega komponent yaratamiz. Callback funksiyasini memoizatsiya qilish uchun useCallback dan foydalanamiz.


import React, { useState, useCallback } from 'react';

function Button({ onClick, children }) {
  console.log('Tugma qayta renderlandi'); // Tugma qachon qayta renderlanishini ko'rsatadi
  return ;
}

const MemoizedButton = React.memo(Button);

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Tugma bosildi');
    setCount((prevCount) => prevCount + 1);
  }, []); // Bo'sh bog'liqliklar massivi funksiya faqat bir marta yaratilishini anglatadi

  return (
    

      
Hisob: {count}

      Ko'paytirish
    

  );
}

export default App;

Ushbu misolda handleClick funksiyasi faqat bir marta yaratiladi, chunki bog'liqliklar massivi bo'sh. App komponenti count holatining o'zgarishi tufayli qayta renderlanganda, handleClick funksiyasi bir xil bo'lib qoladi. React.memo bilan o'ralgan MemoizedButton komponenti faqat proplari o'zgarganda qayta renderlanadi. onClick prop (handleClick) bir xil bo'lib qolganligi sababli, Button komponenti keraksiz qayta renderlanmaydi. Interaktiv xarita ilovasini tasavvur qiling. Foydalanuvchi har safar o'zaro ta'sir o'tkazganda, o'nlab tugma komponentlariga ta'sir qilishi mumkin. useCallback bo'lmasa, bu tugmalar keraksiz qayta renderlanib, sust tajribani yaratadi. useCallback dan foydalanish silliqroq o'zaro ta'sirni ta'minlaydi.

React.memo'ga kirish: Komponentlarni memoizatsiya qilish

React.memo - bu funksional komponentni memoizatsiya qiladigan yuqori tartibli komponent (HOC). U proplari o'zgarmagan bo'lsa, komponentning qayta renderlanishining oldini oladi. Bu sinf komponentlari uchun PureComponent ga o'xshaydi.

React.memo'ni qachon ishlatish kerak

React.memo qanday ishlaydi

React.memo funksional komponentni o'rab oladi va oldingi va keyingi proplarni sayoz (shallow) taqqoslaydi. Agar proplar bir xil bo'lsa, komponent qayta renderlanmaydi.

Misol: Foydalanuvchi profilini ko'rsatish

Keling, foydalanuvchi profilini ko'rsatadigan komponent yaratamiz. Foydalanuvchi ma'lumotlari o'zgarmagan bo'lsa, keraksiz qayta renderlashlarning oldini olish uchun React.memo dan foydalanamiz.


import React from 'react';

function UserProfile({ user }) {
  console.log('UserProfile qayta renderlandi'); // Komponent qachon qayta renderlanishini ko'rsatadi
  return (
    

      
Ism: {user.name}

      
Email: {user.email}

    

  );
}

const MemoizedUserProfile = React.memo(UserProfile, (prevProps, nextProps) => {
  // Maxsus taqqoslash funksiyasi (ixtiyoriy)
  return prevProps.user.id === nextProps.user.id; // Faqat foydalanuvchi IDsi o'zgarganda qayta renderlash
});

function App() {
  const [user, setUser] = React.useState({
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com',
  });

  const updateUser = () => {
    setUser({ ...user, name: 'Jane Doe' }); // Ismni o'zgartirish
  };

  return (
    

      
      
    

  );
}

export default App;

Ushbu misolda MemoizedUserProfile komponenti faqat user.id prop o'zgarganda qayta renderlanadi. user obyektining boshqa xususiyatlari (masalan, ism yoki email) o'zgarsa ham, ID farq qilmasa, komponent qayta renderlanmaydi. `React.memo` ichidagi bu maxsus taqqoslash funksiyasi komponent qachon qayta renderlanishini nozik nazorat qilish imkonini beradi. Doimiy yangilanib turadigan foydalanuvchi profillari bo'lgan ijtimoiy media platformasini ko'rib chiqing. `React.memo` bo'lmasa, foydalanuvchining statusini yoki profil rasmini o'zgartirish, asosiy foydalanuvchi ma'lumotlari bir xil bo'lib qolsa ham, profil komponentining to'liq qayta renderlanishiga olib keladi. `React.memo` maqsadli yangilanishlarga imkon beradi va samaradorlikni sezilarli darajada yaxshilaydi.

useMemo, useCallback va React.memo'ni birlashtirish

Ushbu uchta usul birgalikda qo'llanilganda eng samarali bo'ladi. useMemo qimmat hisob-kitoblarni memoizatsiya qiladi, useCallback funksiyalarni memoizatsiya qiladi va React.memo komponentlarni memoizatsiya qiladi. Ushbu usullarni birlashtirib, siz React ilovangizdagi keraksiz qayta renderlashlar sonini sezilarli darajada kamaytirishingiz mumkin.

Misol: Murakkab komponent

Keling, ushbu usullarni qanday birlashtirishni ko'rsatadigan murakkabroq komponent yaratamiz.


import React, { useState, useCallback, useMemo } from 'react';

function ListItem({ item, onUpdate, onDelete }) {
  console.log(`ListItem ${item.id} qayta renderlandi`); // Komponent qachon qayta renderlanishini ko'rsatadi
  return (
    
  • 
      {item.text}
      
      
    
    • 
  );
}

const MemoizedListItem = React.memo(ListItem);

function List({ items, onUpdate, onDelete }) {
  console.log('List qayta renderlandi'); // Komponent qachon qayta renderlanishini ko'rsatadi
  return (
    
      
      {items.map((item) => (
        
      ))}
    
    
  );
}

const MemoizedList = React.memo(List);

function App() {
  const [items, setItems] = useState([
    { id: 1, text: 'Element 1' },
    { id: 2, text: 'Element 2' },
    { id: 3, text: 'Element 3' },
  ]);

  const handleUpdate = useCallback((id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, text: `Yangilangan ${item.text}` } : item
      )
    );
  }, []);

  const handleDelete = useCallback((id) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id));
  }, []);

  const memoizedItems = useMemo(() => items, [items]);

  return (
    
    
      
    
    
  );
}

export default App;

    Ushbu misolda:

    Ushbu usullarning kombinatsiyasi komponentlarning faqat kerak bo'lganda qayta renderlanishini ta'minlaydi, bu esa samaradorlikning sezilarli darajada yaxshilanishiga olib keladi. Vazifalar ro'yxati doimiy ravishda yangilanadigan, o'chiriladigan va qayta tartiblanadigan keng ko'lamli loyihalarni boshqarish vositasini tasavvur qiling. Ushbu optimizatsiyalarsiz, vazifalar ro'yxatidagi har qanday kichik o'zgarish qayta renderlashlar kaskadini keltirib chiqaradi va ilovani sekin va javob bermaydigan qilib qo'yadi. useMemo, useCallback va React.memo'ni strategik ravishda qo'llash orqali ilova murakkab ma'lumotlar va tez-tez yangilanishlar bilan ham samarali bo'lib qolishi mumkin.

    Qo'shimcha optimallashtirish usullari

    useMemo, useCallback va React.memo kuchli vositalar bo'lsa-da, ular React samaradorligini optimallashtirish uchun yagona imkoniyatlar emas. Mana ko'rib chiqish kerak bo'lgan bir nechta qo'shimcha usullar:

    Optimizatsiya uchun global mulohazalar

    React ilovalarini global auditoriya uchun optimallashtirishda tarmoq kechikishi, qurilma imkoniyatlari va mahalliylashtirish kabi omillarni hisobga olish muhim. Mana bir nechta maslahatlar:

    Xulosa

    React ilovalari samaradorligini optimallashtirish silliq va sezgir foydalanuvchi tajribasini taqdim etish uchun juda muhimdir. useMemo, useCallback va React.memo kabi usullarni o'zlashtirib, global optimallashtirish strategiyalarini hisobga olgan holda, siz turli xil foydalanuvchilar bazasining ehtiyojlarini qondirish uchun kengaytiriladigan yuqori samarali React ilovalarini yaratishingiz mumkin. Samaradorlikdagi zaif nuqtalarni aniqlash uchun ilovangizni profillashni va ushbu optimallashtirish usullarini strategik ravishda qo'llashni unutmang. Vaqtidan oldin optimallashtirmang – eng katta ta'sirga erishishingiz mumkin bo'lgan sohalarga e'tibor qarating.

    Ushbu qo'llanma React samaradorligini optimallashtirishni tushunish va amalga oshirish uchun mustahkam poydevor yaratadi. React ilovalarini ishlab chiqishda davom etar ekansiz, samaradorlikka ustuvor ahamiyat berishni va foydalanuvchi tajribasini yaxshilashning yangi usullarini doimiy ravishda izlashni unutmang.